<template>
	<view>
		<!-- 滑块视图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item class="swiper-item" v-for="(item, index) in slidePicture">
					<image :src="item" mode="heightFix"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 滚动公告 -->
		<view>
			<uni-notice-bar show-icon="true" scrollable="true"
				:text="headnotice" />
		</view>
		
		<!-- 功能图标列表 -->
		<view>
			<uni-section title="功能列表" type="line" padding>
				<uni-grid :column="4" :highlight="true" :showBorder="false" :square="false">
					<uni-grid-item v-for="index in 4">
						<uni-badge class="uni-badge-left-margin" :text="value[index]" absolute="rightTop" :offset="[3, -3]" size="small">
							<view class=".uni-grid-item">
								<uni-icons :type="tabber[index]" size="45" @click="jumpTo(index)"></uni-icons>
								<text class="text">{{tabList[index]}}</text>
							</view>
						</uni-badge>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>
		
		<!-- 公告栏 -->
		<view>
			<uni-section title="公告栏" type="line" padding>
				<view v-for="item in notice_list" class="notice">
					<uni-card v-if="item.visited === false" :title="item.title" :extra="item.time" @click="enterNotice(item)">
						<text>{{item.text}}</text>
					</uni-card>
				</view>
			</uni-section>
		</view>
		<tabBar :pagePath="'/pages/main/main'"></tabBar>
	</view>	
</template>

<script>
	export default {
	    data() {
	        return {
				textData: {},
				value: [],
	            background: ["#FF4040", "#BF3EFF", "#98F5FF"],
	            indicatorDots: true,
	            autoplay: true,
	            interval: 5000,
	            duration: 500,
				headnotice: '系统全新升级 Version 1.0, 支持待办处理',
				tabList: ["维修申请", "人员申请", "公告", "联系我们"],
				tabber: ["notification", "staff-filled", "chat", "more"],
				slidePicture: ["https://usc.sysu.edu.cn/taskcenter-v4/static/img/bn%20(4).c7eb786.png", 
				               "https://usc.sysu.edu.cn/taskcenter-v4/static/img/bn%20(2).36925cd.png", 
							   "https://usc.sysu.edu.cn/taskcenter-v4/static/img/bn%20(3).6e4feb1.png"],
				notice_list: [
					{
						visited: true,
						title: '系统公告',
						time: '2022-10-6',
						text: '公告内容1'
					},
					{
						visited: false,
						title: '系统公告',
						time: '2022-10-7',
						text: '公告内容2'
					}
				]
	        }
	    },
	    methods: {
			getMessage() {
				// 报修单申请数量
				uni.request({
				    url: 'http://localhost:8081/repair/unchecked_repairment_cnt', 
					success: (res) => {
						//console.log(res.data.data);
						if (res.data.code=200) {
							//this.order_request_list = res.data.data;
							this.value.push(res.data.data);
						}
					}
				});
				
				// 人员申请数量
				uni.request({
				    url: 'http://localhost:8081/user/unchecked_register_cnt', 
					success: (res) => {
						//console.log(res.data.data);
						if (res.data.code=200) {
							//this.user_request_list = res.data.data;
							this.value.push(res.data.data);
							console.log("fuck" + this.value[1]);
						}
					}
				});
				
				// 公告数量
				// uni.request({
				//     url: 'http://www.intmote.com/test.json', 
				// 	success: (res) => {
				// 		console.log(res.data);
				// 		if (res.data.code == "200") {
				// 			//this.notice_list = res.data.data;
				// 			//this.value[2] = res.data.index;
				// 		}
				// 	}
				// });
			},
	        changeIndicatorDots(e) {
	            this.indicatorDots = !this.indicatorDots
	        },
	        changeAutoplay(e) {
	            this.autoplay = !this.autoplay
	        },
	        intervalChange(e) {
	            this.interval = e.target.value
	        },
	        durationChange(e) {
	            this.duration = e.target.value
	        },
			getSwipers() {
				console.log("获取轮播图的数据")
				uni.request({
					url:'',
					success:function(res) {
						this.sslidePicture = res.data
					}
				})
			},
			jumpTo(index) {
				switch(index) {
					case 0:
						console.log("跳转到报修申请处理页面")
						uni.navigateTo({
							url:"./dealt_order"
						});
					break
					case 1:
						console.log("跳转到用户申请处理页面")
						uni.navigateTo({
							url:"./dealt_user"
						});
					break
					case 2:
						console.log("跳转到公告页面")
						uni.navigateTo({
							url:"./notice"
						});
					break
					case 3:
						console.log("跳转到其他页面")
						uni.navigateTo({
							url:"./other"
						});
					break
				}
			},
			enterNotice(notice) {
				console.log("跳转到公告详情")
				uni.navigateTo({
					url:"./notice_detail?notice=" + JSON.stringify(notice)
				});
			}
	    },
		onLoad() {
			this.getMessage();
		}
	}
</script>

<style>
	.uni-margin-wrap {
		width: 100%;
		height: 450rpx;
	}
	.swiper {
		height: 450rpx;
		width: 100%;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.uni-grid-item {
		display:flex;
		flex-direction:column;
		background-color: white;
		align-items: center;//垂直居中
		justify-content: center;//水平居中
	}
	.notice {
		display: block;
		background-color: "#FFEFD5";
	}
	.uni-badge-left-margin {
		margin-left: 10px;
	}
</style>